<template>
  <div>
    <!-- 搜索区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          clearable
          placeholder="请输入内容"
          class="input-with-select"
          v-model="queryinfo.queryString"
        >
          <!-- <el-button slot="append" icon="el-icon-search" @click="searchGoodList"></el-button> -->
        </el-input>
      </el-col>
      <div style="display:flex;align-items:center;">
        <div style="margin-right:20px;color:#666666;">商品状态</div>
        <div
          style="height:40px;display:flex;align-items:center;justify-content:center;border-radius: 4px;
    border: 1px solid #DCDFE6;padding:0 10px;background-color:#FFFFFF;"
        >
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{title}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="i" v-for="(item,i) in isAgainOrder" :key="i">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <el-button @click="searchGoodList" type="primary" size="medium" style="margin-left:20px">查询</el-button>
      </div>

      <!-- <el-select v-model="queryinfo.queryType" placeholder="待审核" clearable>
        <el-option
          v-for="item in isAgainOrder"
          :label="item.name"
          :key="item.status"
          :value="item.status"
        ></el-option>
      </el-select>-->

      <!-- <el-col :span="4">
        <el-button type="primary" @click="goAdd">添加商品</el-button>
      </el-col>-->
    </el-row>

    <!-- table 表格区域 -->
    <el-table :data="goodslist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="商品价格(元)" prop="money"></el-table-column>
      
      <!-- <el-table-column label="商品价格(CY)" prop="cymoney" width="95"></el-table-column> -->
      <!-- <el-table-column label="商品重量" prop="goods_weight" width="70"></el-table-column> -->
      <el-table-column label="创建时间" prop="beginTime">
        <!-- <template slot-scope="scope">
          {{scope.row.beginTime | dateFormat}}
        </template>-->
      </el-table-column>
      <el-table-column label="商品状态">
        <template slot-scope="scope">
          <div>{{scope.row.status==1?'审核通过':scope.row.status==2?'待审核':scope.row.status==3?'已拒绝':''}}</div>
        </template>
      </el-table-column>
      <el-table-column label="商品分类" prop="typeName"></el-table-column>
      <el-table-column label="店铺名称" prop="sellName"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getDetailsInfo(scope)">查看详情</el-button>
          <!-- <el-button type="primary" size="mini" @click="agree(scope)">同意</el-button>
          <el-button type="danger" size="mini" @click="Refuse(scope)">拒绝</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="查看商品详细信息" :visible.sync="productBtn" width="50%">
      <div>
        <div>
          <div class="base-flex-between base-border">
            <div class="name-color">商品分类</div>
            <div>{{detailsInfo.typeName}}</div>
          </div>
          <div class="base-flex-between base-border">
            <div class="name-color">商品名称</div>
            <div>{{detailsInfo.name}}</div>
          </div>
          <el-input
            v-model="formData.errName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div
            class="base-border"
            v-if="detailsInfo.image"
            style="display:flex;justify-content:space-between;margin-bottom:20px;"
          >
            <div class="name-color">商品主图</div>
            <div
              style="width:16rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;"
            >
              <el-image
                style="width: 60px; height:60px"
                :src="detailsInfo.image"
                :preview-src-list="[detailsInfo.image]"
              ></el-image>
            </div>
          </div>
          <div
            class="base-border"
            style="display:flex;justify-content:space-between;margin-bottom:20px;"
            v-if="detailsInfo.imagePhotos"
          >
            <div class="name-color">商品轮播图</div>
            <div
              style="width:16rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;"
            >
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                v-for="(item,i) in detailsInfo.imagePhotos"
                :key="i"
                :src="item"
                :preview-src-list="detailsInfo.imagePhotos"
              ></el-image>
            </div>
          </div>
          <div
            class="base-border"
            style="display:flex;justify-content:space-between;margin-bottom:20px;"
            v-if="currentProductInfo.details"
          >
            <div class="name-color">商品详情图</div>
            <div
              style="width:16rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;"
            >
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                v-for="(item,i) in currentProductInfo.details"
                :key="i"
                :src="item"
                :preview-src-list="currentProductInfo.details"
              ></el-image>
            </div>
          </div>
          <el-input
            v-model="formData.imgName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>

          <div
            class="base-border"
            style="display:flex;align-items:center;justify-content: space-between;margin-bottom:20px;"
            v-for="(item,i) in guigeData.dataThree"
            :key="i"
            v-if="guigeData.dataThree"
          >
            <el-image
              style="width: 60px; height:60px;margin-bottom:15px;"
              :src="item.rule_image"
              :preview-src-list="[item.rule_image]"
            ></el-image>
            <div style="display:flex;align-items:center;">
              <div style="display:flex;align-items:center;margin-right:20px;">
                <div>规格名称:{{item.rule_name}}</div>
              </div>
              <div style="display:flex;align-items:center;margin-right:20px;">
                <div>成本价:{{item.rule_price}}</div>
              </div>
              <div style="display:flex;align-items:center;margin-right:20px;">
                <div>销售价:{{item.rule_cost}}</div>
              </div>
              <div style="display:flex;align-items:center;">
                <div>库存:{{item.rule_unit}}</div>
              </div>
            </div>
          </div>
          <el-input
            v-model="formData.skuName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div v-if="currentProductInfo.returnAddr">
            <div class="base-flex-between base-border">
              <div class="name-color">退货信息：姓名</div>
              <div>{{currentProductInfo.returnAddr[0]}}</div>
            </div>
            <div class="base-flex-between base-border">
              <div class="name-color">退货信息：电话</div>
              <div>{{currentProductInfo.returnAddr[1]}}</div>
            </div>
            <div class="base-flex-between base-border">
              <div class="name-color">退货信息：地址</div>
              <div>{{currentProductInfo.returnAddr[2]}}</div>
            </div>
          </div>
          <el-input
            v-model="formData.addrName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div v-if="currentProductInfo.service" style="padding-left:10px;">
            <div>商务服务</div>
            <div style="display:flex;align-items:center;margin-top:15px;flex-wrap:wrap;">
              <div
                style="padding:4px 10px;border-radius:4px;border:1px solid #eeeeee;margin-right:2rem;"
                v-for="(item,i) in currentProductInfo.service"
                :key="i"
              >{{item}}</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" v-if="detailsInfo.status==2">
          <div>
            <el-button @click="buquanConfirmSub(0)">拒绝</el-button>
            <el-button type="primary" @click="buquanConfirmSub(1)" :loading="addFormLoading">同意</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数
      queryinfo: {
        queryString: "",
        pageNo: 1,
        pageSize: 10,
        queryType: 2,
      },
      // 商品列表数据，默认为空
      goodslist: [],
      // 总数据条数
      total: 0,
      isAgainOrder: [
        {
          name: "全部",
          status: "",
        },
        {
          name: "待审核",
          status: "2",
        },
        {
          name: "审核通过",
          status: "1",
        },
        {
          name: "已拒绝",
          status: "3",
        },
      ],
      title: "待审核",
      productBtn: false,
      currentProductInfo: {},
      guigeData: [],
      formData: {
        errName: "", //商品名称
        imgName: "", //商品图片
        skuName: "", //商品规格
        addrName: "", //退货地址
      },
      maskType: null,
      detailsInfo: {},
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    buquanConfirmSub(type) {
      if (type == 0) {
        if (this.maskType) {
          this.$confirm("是否拒绝该商品", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let params = {
                queryType: 2,
                queryString: JSON.stringify(this.formData),
                queryId: this.detailsInfo.id,
              };
              this.$http
                .post("/manage/mall/productPassNO", params)
                .then((res) => {
                  console.log(res);
                  this.productBtn = false;
                  this.getGoodsList();
                  this.$message({
                    message: "已拒绝",
                    type: "success",
                  });
                });
            })
            .catch(() => {});
        } else {
          this.maskType = 2;
        }
      } else {
        this.$confirm("是否同意该商品", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http
              .post("/manage/mall/productPassNO", {
                queryType: 1,
                queryId: this.detailsInfo.id,
              })
              .then((res) => {
                this.productBtn = false;
                this.getGoodsList();
                this.$message({
                  message: "已同意",
                  type: "success",
                });
              });
          })
          .catch(() => {});
      }
    },
    getDetailsInfo(scope) {
      if (typeof scope.row.imagePhotos == "string") {
        scope.row.imagePhotos = JSON.parse(scope.row.imagePhotos);
      }
      this.maskType = null;
      this.detailsInfo = scope.row;
      console.log(scope);
      this.getProductDetails(scope.row.id);

      this.formData={
        errName: "", //商品名称
        imgName: "", //商品图片
        skuName: "", //商品规格
        addrName: "" //退货地址
      }

      this.productBtn = true;
    },
    async getProductDetails(pId) {
      let params = {
        queryId: pId,
      };
      const { data: res } = await this.$http.post(
        "/manage/mall/getProductDetailsById",
        params
      ); //, { params: this.queryinfo }
      console.log(res.data);
      if (typeof res.data.detail.details == "string") {
        res.data.detail.details = JSON.parse(res.data.detail.details);
      }
      if (typeof res.data.detail.returnAddr == "string") {
        res.data.detail.returnAddr = JSON.parse(res.data.detail.returnAddr);
      }
      if (typeof res.data.detail.service == "string") {
        res.data.detail.service = JSON.parse(res.data.detail.service);
      }

      this.currentProductInfo = res.data.detail;
      let picOneData = [];

      this.guigeData = res.data.data;

      let newDataList = [];
      res.data.skuList.forEach((item, index) => {
        let obj = {
          rule_id: item.id,
          rule_cost: item.money,
          rule_unit: item.stock,
          rule_price: item.inMoney,
          rule_image: item.img,
          rule_name: "",
          fileList: [{ name: index + ".jpg", url: item.img }],
        };
        JSON.parse(item.description).forEach((twoItem) => {
          obj.rule_name += twoItem.title + ":" + twoItem.content + "/";
        });
        obj.rule_name = obj.rule_name.slice(0, -1);
        newDataList.push(obj);
      });
      // console.log(newDataList);
      this.guigeData.dataThree = newDataList;
      console.log(this.guigeData);
    },
    handleCommand(command) {
      console.log(this.isAgainOrder[command]);
      this.title = this.isAgainOrder[command].name;
      this.queryinfo.queryType = this.isAgainOrder[command].status;
    },
    searchGoodList() {
      this.queryinfo.pageNo = 1;
      this.getGoodsList();
    },
    // 根据查询参数获取商品列表
    async getGoodsList() {
      // let params={
      //   "pageNo": this.queryinfo.pagenum,
      //   "pageSize": this.queryinfo.pagesize
      // }
      const { data: res } = await this.$http.post(
        "/manage/mall/getAllProductList",
        this.queryinfo
      ); //, { params: this.queryinfo }

      console.log(res);
      this.goodslist = res.data.list;
      this.total = res.data.total;
      // const { data: res } = await this.$http.get('goods', { params: this.queryinfo })

      // if (res.meta.status !== 200) return this.$message.error('获取商品列表失败！')
      // this.goodslist = res.data.goods
      // this.total = res.data.total
      // console.log(res)
    },
    // 监听 pageSize 的变化，并立即获取最新的数据
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getGoodsList();
    },
    // 监听 pageNum 的变化，并立即获取最新的数据
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.getGoodsList();
    },
    // 根据商品Id，删除商品数据
    Refuse(scope) {},
    // 跳转到添加页面
    goAdd() {
      this.$router.push("/goods/add");
    },
    // 同意
    async agree(data) {
      const confirmResult = await this.$confirm("同意商品审核？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);

      // 用户取消了删除
      if (confirmResult == "confirm") {
      }
      console.log(data);

      //this.$router.push('/goods/edit')
      // this.$router.push({
      //   path:'/goods/edit',
      //   query:{
      //     params:edit.row
      //   }
      // })
    },
  },
  // 过滤器
  filters: {
    // 格式化时间的过滤器
    /* dateFormat(originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1).toString().padStart(2, '0')
      const d = dt
        .getDate()
        .toString()
        .padStart(2, '0')

      const hh = dt
        .getHours()
        .toString()
        .padStart(2, '0')
      const mm = dt
        .getMinutes()
        .toString()
        .padStart(2, '0')
      const ss = dt
        .getSeconds()
        .toString()
        .padStart(2, '0')

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    } */
  },
};
</script>

<style lang="less" scoped>
.base-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
}
.name-color {
  color: #666666;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.base-border {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
</style>
